<template>
    <div>
        <div class="main_operation">
            <div class="operation_left">
                <a-button v-if="routerShow($route, 'company_add')" class="mr10" type="primary" @click="addBtn">添加</a-button>
            </div>
            <div class="operation_right">
            </div>
        </div>
        <div class="main">
            <a-table :pagination="false" bordered :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data" :rowKey="record => record.id" :scroll="{x: 1100, y: 500 }">
                <template slot="action" slot-scope="text, record">
                    <template>
                        <!-- v-if="routerShow($route,'group_update')" -->
                        <a-button v-if="routerShow($route, 'passport_list')" size="small" class="mr5 mb5" type="primary" @click="goUser(record)">查看用户</a-button>
                        <a-button v-if="routerShow($route, 'company_update')" size="small" class="mr5 mb5" type="primary" @click="editBtn(record)">编辑</a-button>
                        <a-button v-if="routerShow($route, 'equipment_list')" size="small" class="mr5" type="primary" @click="goEquipment(record)">查看设备</a-button>
                        <a-button v-if="routerShow($route, 'company_delete')" size="small" class="mr5" type="danger" @click="delBtn(record)">删除</a-button>
                    </template>
                </template>
            </a-table>
            <div class="pageBox">
                <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page" :defaultCurrent="1" @change="pageChange" />
            </div>
        </div>
        <!-- 分配公司 ; 添加编辑代理组 -->
        <a-modal :maskClosable="false" :destroyOnClose="true" :title="titleModel" :width="600" v-model="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
            <!-- 添加编辑代理组 -->
            <a-form>
                <a-form-item required label="公司名称:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-input v-model="formItem.name" placeholder="请输入公司名称" />
                </a-form-item>
                <a-form-item label="所属代理:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-select allowClear v-model="formItem.parent_id" placeholder="请选择所属代理">
                        <a-select-option v-for="item in agentAllData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="公司地址:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-input v-model="formItem.address" placeholder="请输入公司地址" />
                </a-form-item>
                <a-form-item label="公司描述:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-textarea v-model="formItem.describe" placeholder="请输入公司描述" :autosize="{ minRows: 3, maxRows: 6 }" />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
import {
  mapState,
  mapActions,
} from 'vuex';
import Vue from 'vue';
import {
  USER,
} from '@/store/mutation-types';

export default {
  name: 'configCompany',
  data() {
    return {
      userData: '', // 权限
      /* 通用模块 */
      // 列表
      tableLoad: false, // 列表loading状态
      formList: {
        // 列表信息
        page: 1,
      },
      titleModel: '', // 窗口标题
      /* 通用模块end */

      /* 添加编辑 */
      visible: false, // 窗口显示隐藏
      confirmLoading: false, // 按钮loading状态
      formItem: {
        name: '',
        parent_id: undefined,
        address: '',
        describe: '',
      },
      /* 添加编辑end */

      /* 分配 代理，公司 */
      // 分配代理提交
      configAgentForm: {
        user_id: '',
        agent_ids: [],
      },
      // 分配公司提交
      configCompanyForm: {
        user_id: '',
        company_ids: [],
      },

      selectedKeys: [], // 穿梭框勾选
      transferData: [], // 穿梭框数据
      /* 分配代理公司end */
    };
  },
  computed: {
    ...mapState({
      Fields: state => state.group.CompanyFields,
      dataLists: state => state.group.dataCompanyLists,
      requestCode: state => state.group.requestCode,

      agentAllData: state => state.group.agentAllData, // 代理all
    }),
    isAdmin() {
      // 账号等级：1平台 2代理 3公司
      if (this.userData.role_grade === 1) {
        return 1;
      }
      if (this.userData.role_grade === 2) {
        return 2;
      }
      if (this.userData.role_grade === 3) {
        return 3;
      }
    },
    isTransferType() {
      if (this.titleModel == '分配代理') {
        return this.configAgentForm.agent_ids;
      }
      if (this.titleModel == '分配公司') {
        return this.configCompanyForm.company_ids;
      }
    },
  },
  mounted() {
    console.log(this.$route);
    if (this.$route.query.agentID != undefined) {
      this.formList.parent_id = this.$route.query.agentID;
    }
    this.userData = Vue.ls.get(USER);
    // this.getUserPlatformAll()
    this.agentAll();
    // this.companyAll()
    this.changeData();
  },
  methods: {
    // 穿梭框右边选中
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.formItem.contact_ids = nextTargetKeys;
      if (this.titleModel == '分配代理') {
        this.configAgentForm.agent_ids = nextTargetKeys;
      } else if (this.titleModel == '分配公司') {
        this.configCompanyForm.company_ids = nextTargetKeys;
      }
      // console.log('targetKeys: ', nextTargetKeys);
    },
    // 穿梭框勾选的
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
    },
    ...mapActions({
      getLists: 'group/getCompanyList', // 列表
      companyAdd: 'group/companyAdd', // 列表
      companyEdit: 'group/companyEdit', // 列表
      companyDel: 'group/companyDel', // 删除
      companConfig: 'group/companConfig', // 分配公司
      getUserPlatformAll: 'group/getUserPlatformAll', // 平台All
      agentAll: 'group/agentAll', // 代理All
      companyAll: 'group/companyAll', // 公司All
    }),
    /* 通用模块 */
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 1000);
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    /* 通用模块end */

    /* 分配代理公司 */
    // 代理分配
    configAgent(item) {
      console.log(item);
      this.titleModel = '分配代理';
      this.transferData = this.agentAllData;
      this.configAgentForm.user_id = item.id;
      this.configAgentForm.agent_ids = item.agent_id.map(String);
      this.visible = true;
    },
    // 公司分配
    configCompany(item) {
      console.log(item);
      this.titleModel = '分配公司';
      this.transferData = this.companyAllData;
      this.configCompanyForm.user_id = item.id;
      this.configCompanyForm.company_ids = item.company_id.map(String);
      this.visible = true;
    },
    // 查看用户
    goUser(item) {
      this.$router.push({
        path: '/user/List',
        query: {
          CompanyID: item.id,
        },
      });
    },
    // 查看设备
    goEquipment(item) {
      console.log(item);
      this.$router.push({
        path: '/equipment/List',
        query: {
          group_id: item.id,
        },
      });
    },
    // 添加
    addBtn() {
      this.titleModel = '添加公司';
      this.formItem = {
        name: '',
        parent_id: undefined,
        address: '',
        describe: '',
      };
      this.visible = true;
    },
    // 编辑
    editBtn(item) {
      console.log(item);
      this.titleModel = '编辑公司';
      this.formItem = {
        id: item.id,
        name: item.name,
        parent_id: item.parent_id == null || item.parent_id == 0
          ? undefined
          : item.parent_id,
        address: item.address,
        describe: item.describe,
      };
      this.visible = true;
    },
    // 窗口确定
    handleOk() {
      this.confirmLoading = true;
      if (this.titleModel == '添加公司') {
        this.companyAdd(this.formItem);
      } else if (this.titleModel == '编辑公司') {
        this.companyEdit(this.formItem);
      }
      // console.log('代理：',this.configAgentForm,'公司：',this.configCompanyForm);
      setTimeout(() => {
        // console.log(this.requestCode);
        if (this.requestCode === 0) {
          this.visible = false;
          this.changeData();
        }
        this.confirmLoading = false;
      }, 1000);
    },
    // 窗口取消
    handleCancel() {
      this.visible = false;
    },
    /* 分配代理公司end */

    /* 删除 */
    delBtn(item) {
      console.log(item);
      const _this = this;
      this.$confirm({
        title: `您确定要删除 ${item.name} 吗?`,
        content: '删除后将不可恢复,请仔细核对!',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.companyDel({
            id: item.id,
          });
          _this.changeData();
        },
      });
    },
  },
};
</script>

<style scoped>
</style>
